import { h } from "preact";

export default function Header() {
  return (
    <header class="fixed top-0 left-0 right-0 z-40 py-5 bg-surface-950/40 backdrop-blur-xl border-b border-white/5">
      <div class="container mx-auto px-4 md:px-6 flex items-center justify-between">
        <a 
          href="/" 
          class="group flex items-center gap-3 transition-all duration-500 hover:opacity-90"
          aria-label="Home"
        >
          <div class="relative w-10 h-10 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-primary-400/80 to-primary-600/80 rounded-lg transform group-hover:scale-105 transition-transform duration-500 group-hover:shadow-glow"></div>
            <div class="absolute inset-0 flex items-center justify-center text-white font-display text-2xl font-bold">
              M
            </div>
          </div>
          <span class="text-surface-100 font-display text-lg tracking-wide opacity-90 group-hover:text-primary-300 transition-colors duration-500">
            MiniBlog
          </span>
        </a>
        
        <nav class="flex items-center space-x-4">
          <a 
            href="/editor" 
            class="text-surface-100 hover:text-primary-300 transition-colors duration-300 px-3 py-2 rounded-md hover:bg-surface-800/50"
          >
            富文本编辑器
          </a>
          <a 
            href="/new" 
            class="text-surface-100 hover:text-primary-300 transition-colors duration-300 px-3 py-2 rounded-md hover:bg-surface-800/50"
          >
            写文章
          </a>
        </nav>
      </div>
    </header>
  );
} 